<template>
	<view class="pages">
		<view class="flex-center-column p-y-30">
			<u-avatar @click="goPreview(0,[userInfo.avatar])" font-size="40"
				:text="userInfo.avatar.length!=0?'':userInfo.name.slice(0, 1)" :src="userInfo.avatar" bg-color="#ff7e46"
				mode="widthFix" size="100"></u-avatar>
			<view class="f-w800 p-y-20">
				<view class="t-c m-b-10 f-40">{{userInfo.class || ''}}</view>
				<u-icon v-if="userInfo.sex" size="26" :name="userInfo.sex?'man':'woman'"
					:label="userInfo.study_id + userInfo.name" labelSize="20" labelColor="#333">
				</u-icon>
			</view>
		</view>
		<view class="card f-36 f-bold">
			<view @click="inputShow = true" class="card-button flex-between-row">
				修改密码
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view @click="goLink('/pages/link/grade')" class="card-button flex-between-row">
				查看成绩
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view @click="goLink('/pages/link/timetable')" class="card-button flex-between-row">
				我的课表
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view @click="goLink('/pages/detail/protocol?type=1')" class="card-button flex-between-row">
				关于我们
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view @click="goLink('/pages/detail/protocol?type=2')" class="card-button flex-between-row">
				用户协议
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view @click="goLink('/pages/detail/protocol?type=3')" class="card-button flex-between-row">
				隐私条例
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view @click="go" class="bottom-button" style="bottom: 200rpx;">
			{{userInfo.token?'退出登录': '点击登录'}}
		</view>
		<u-popup round="20" mode="center" :show="inputShow" @close="inputShow=false">
			<view class="Input-css m-b-30">
				<view class="t-c m-b-20 f-bold f-36 p-y-30">修改密码</view>
				<u--input v-model="modelText" border="bottom" :focus="true" placeholder="请输入新密码"></u--input>
			</view>
			<view class="flex-between-row m-t-20 o-h">
				<view @click="inputShow=false" class="u-border-top u-border-right t-c flex-1 p-y-20 f-36 f-bold">取消
				</view>
				<view @click="saveModelText" class="u-border-top t-c flex-1 p-y-20 f-bold f-36 col-success">确定</view>
			</view>

		</u-popup>
		<!-- 底部导航栏 -->
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import {
		getLogout,
		postChangePwd,
	} from '@/api/user.js'
	import Tabbar from '@/components/tabbar.vue'
	export default {
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		components: {
			Tabbar
		},
		onLoad() {},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			if (!this.$store.getters.userInfo.token) {
				return this.goLogin()
			}
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {

		},
		data() {
			return {
				inputShow: false,
				modelText: ''
			}
		},
		methods: {
			async go() {
				const res = await getLogout()
				if (this.$store.getters.userInfo.token) {
					if (res.code === 200) {
						this.$store.commit('user/logout')
						uni.showToast({
							title: '退出登录成功',
							mask: true,
						})
					}
				} else {
					this.goLink('/pages/login/login')
				}
			},
			async saveModelText() {
				if (this.modelText.trim('').length == 0) {
					return uni.showToast({
						title: '新密码不能未空',
						icon: 'none'
					})
				}
				if (this.modelText.trim('').length < 6 || this.modelText.trim.length > 10) {
					return uni.showToast({
						title: '新密码长度在6~10之间',
						icon: 'none'
					})
				}
				const res = await postChangePwd({
					pwd: this.modelText
				})
				if (res.code === 200) {
					this.$store.commit('user/logout')
					uni.showToast({
						title: '密码修改成功'
					})
					this.goLogin()
				}
				this.inputShow = false
			}
		}

	}
</script>

<style>
	page {
		height: 100%;
		background: linear-gradient(-225deg, rgba(254, 214, 227, 0.5) 22.22%, rgba(168, 237, 234, 0.5) 51.08%, rgba(254, 214, 227, 0.5) 78.34%);
	}
</style>

<style lang="scss" scoped>
	.pages {
		padding: 0rpx 30rpx 160rpx;
	}

	.card {
		padding: 10rpx 20rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx;

		&-button {
			padding: 20rpx 10rpx;
			border-bottom: 2rpx solid #ececec;
		}
	}

	.Input-css {
		width: 650rpx;
		padding: 20rpx 40rpx 0;
	}
</style>
